<template>
  <div class="app-form">
    <a-form :colon="false" layout="vertical">
      <formComponent
        :isValidate="true"
        v-model:formDataA="props.user_form"
        v-model:formRefA="formRef"
        v-model:rulesRefA="ruleRef"
        v-model:validateInfosA="validateInfos"
        v-model:useFormA="useForm"
      />
      <a-form-item v-bind="validateInfos.count" label="生成数量">
        <a-input-number
          v-model:value="formRef.count"
          :min="1"
          :max="20"
          :precision="0"
          style="width: 100%"
        ></a-input-number>
      </a-form-item>
      <!-- 添加产品 -->
      <addProduct
        v-if="adddVisible"
        :visible="adddVisible"
        @onClose="closeAddProduct"
        @onSuccess="onSuccess"
      ></addProduct>
      <!-- 选择产品 -->
      <chooseProduct
        :updateListKey="updateListKey"
        v-model:visible="chooseVisible"
        @chooseProduct="confirmChooseProduct"
        @showAddProduct="showAddProduct"
      ></chooseProduct>

      <!-- 选择关键词 -->
      <chooseKeyword
        :visible="keywordVisible"
        @cancel="cancelChooseKeyword"
        :tags="choose_tag"
        @onSuccess="successChooseKeyword"
      ></chooseKeyword>
    </a-form>
  </div>
</template>
<script setup>
import { ref, reactive, computed, watch } from "vue";
import { Form } from "ant-design-vue";
import _ from "lodash";
import {
  DownCircleFilled,
  RightCircleFilled,
  DeleteOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import request from "@/common/utils/request";
import chooseProduct from "./chooseProduct.vue";
import chooseKeyword from "./chooseKeyword.vue";
import formComponent from "./formComponent.vue";
import addProduct from "./AddGoods.vue";

const props = defineProps({
  user_form: {
    type: Array,
    default: () => [],
  },
  edit_data: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const useForm = Form.useForm;
const formRef = reactive({
  keyword_type: "product",
  product_id: undefined,
  product_keyword: "",
  library_keyword: "",
  count: 1,
});
const choose_tag = computed(() => {
  return formRef.library_keyword
    ? formRef.library_keyword.split("\n").filter((item) => item.trim() != "")
    : [];
});
const ruleRef = reactive({
  count: [{ required: true, message: "请输入文章数量", trigger: "blur" }],
  // product_id: [{ required: true, message: "请选择产品", trigger: "change" }],
  // product_keyword:[ { required: true, message: "请输入关键词", trigger: "blur" }],

  // library_keyword:[
  // { required: false, message: "请填写或者选择关键词", trigger: "change" },
  // ]
});
let keywordPlaceholder = `请输入关键词，回车换行，如：
华为
荣耀
小米
`;
let updateListKey = ref(0);
let adddVisible = ref(false);
let chooseVisible = ref(false);
let libraryVisible = ref(false);
let keywordVisible = ref(false);
let keywordList = ref([]);
let libraryList = ref([]);
let currentProduct = ref({
  id: 0,
  title: "",
  image: [],
  keyword: "",
  brand_id: "",
});
// watch(()=>formRef.keyword_type,(type)=>{
//   if(type == "product"){
//     ruleRef.product_id[0].required = true;
//     ruleRef.product_keyword[0].required = true;
//     ruleRef.library_keyword[0].required = false;
//   }else if (type == "keyword_library"){
//     ruleRef.product_id[0].required = false;
//     ruleRef.product_keyword[0].required = false;
//     ruleRef.library_keyword[0].required = true

//   }
// },{immediate:true})

const { validate, validateInfos } = useForm(formRef, ruleRef);

const showKeywordLibrary = () => {
  keywordVisible.value = true;
};
const cancelChooseKeyword = () => {
  keywordVisible.value = false;
};
const successChooseKeyword = (keys) => {
  keywordVisible.value = false;
  if (keys.length) {
    formRef.library_keyword = keys.join("\n");
  }
};
const showChooseProduct = () => {
  chooseVisible.value = true;
};

const showAddProduct = () => {
  adddVisible.value = true;
};
const closeAddProduct = () => {
  adddVisible.value = false;
};
const onKeywordSuccess = () => {
  keywordVisible.value = false;
  getKeywordList();
};
const delProduct = () => {
  currentProduct.value = {
    id: "",
    title: "",
    image: [],
    keywords: "",
    brand_id: "",
    wiki_id: "",
  };
  formRef.product_id = "";
};
const onSuccess = () => {
  adddVisible.value = false;
  updateListKey.value++;
  getLibraryList();
};
const confirmChooseProduct = (record) => {
  let data = {
    id: record.id,
    image: [record.image[0].image],
    title: record.title,
    keyword: record.keyword,
    brand_id: record.brand_id,
    wiki_id: record.wiki_id,
  };

  formRef.product_id = record.id;
  formRef.product_keyword = record.keyword;
  currentProduct.value = _.cloneDeep(data);
  // 判断是否有关键词
  if (data.keyword) {
    formRef.product_keyword = data.keyword.replace(/\、/g, "\n");
  }

  chooseVisible.value = false;
};

const getKeywordList = () => {
  request
    .get("/work_ai", "/user/socialMedia/keywordLibrary/get", {})
    .then((res) => {
      keywordList.value = res.result;
    });
};
const getLibraryList = () => {
  request
    .get("/work_ai", "/user/socialMedia/inspiration/get", {})
    .then((res) => {
      libraryList.value = res.result;
    });
};
getLibraryList();
getKeywordList();
defineExpose({ validate, formRef, currentProduct });
</script>
<style lang="less" scoped>
.product-wrapper {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 10px;
  height: 92px;
}

.product-title {
  display: flex;
  justify-content: center;
  font-size: 30px;
  font-weight: 600;
  color: var(--ss-primary-color);
}

.product-btn {
  display: flex;
  justify-content: center;
}

.outarea {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  outline: 1px dashed #eaeaea;
  border-radius: 10px;
  padding: 10px;
  height: 100%;
  transition: all 0.3s ease;

  &:hover {
    outline: 1px dashed var(--ss-primary-color);
  }
}

.product-item {
  outline: 1px dashed var(--ss-primary-color);
  border-radius: 10px;
  background-color: #f5f5f5;
  padding: 10px;

  img {
    width: 50px;
    height: 50px;
  }
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
}
:deep(.library-form-item-wrapper) {
  .ss-form-item-no-colon {
    display: flex;
  }
}
.library-form-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.library-form-item-icon {
  display: flex;
  align-items: center;
  color: var(--ss-primary-color);
  cursor: pointer;
}
</style>
